<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>发现</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="./js/swiper.min.css" />
</head>
<style>
    .discover_top {
        width: 100%;
        line-height: 50px;
        background: linear-gradient(to right, #FFCF00, #FFBE00);
        text-align: center;
        font-size: 16px;
        color: #333;
    }
    
    .swiper_top {
        background: #fff;
        height: 30px;
        padding: 0 10px;
    }
    
    .swiper-slide {
        color: #444;
    }
    
    .swiper-slide-active {
        color: #333;
        font-weight: 700;
        font-size: 16px;
    }
    
    .swiper-slide-active::after {
        content: "";
        position: absolute;
        bottom: 5px;
        width: 50%;
        left: 0;
        height: 2px;
        border-radius: 1px;
        background: #FFBE00;
    }
    
    .outer {
        padding: 0 15px;
    }
    
    .discover_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .discover_content a {
        width: 48%;
        height: 200px;
        margin-top: 10px;
        background: #fff;
        border-radius: 5px;
        font-size: 0;
        padding-bottom: 10px;
    }
    
    .discover_content .card img {
        width: 100%;
        max-height: 140px;
    }
    
    .goods_title {
        font-size: 14px;
        color: #333;
        margin: 0 10px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical;
        -o-line-clamp: 2;
        -o-box-orient: vertical;
        -ms-line-clamp: 2;
        -ms-box-orient: vertical;
    }
    
    .inner_title {
        font-size: 12px;
        color: #666;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .shop_name {
        width: 80px;
        overflow: hidden;
    }
    
    .price {
        font-size: 12px;
        color: #FFBE00;
        font-weight: 700;
    }
</style>

<body ontouchstart>
    <div class="topNav">
        <a href="./discover.html"><img src="./images/xiangzuo.png" alt=""></a>
        <p>商品详情</p>
    </div>
    <div class="block"></div>
    <div class="outer">
        <div class="discover_content">
            <a href="discover_detail.html">
                <div class="card">
                    <img src="./images/1585641068(1).jpg" alt="">
                    <p class="goods_title">商品名称商品名称商品名称商品名称</p>
                    <div class="inner_title">
                        <p class="shop_name">店家名称</p>
                        <p class="price">￥ 55.00</p>
                    </div>
                </div>
            </a>
            <a href="discover_detail.html">
                <div class="card">
                    <img src="./images/1585641068(1).jpg" alt="">
                    <p class="goods_title">商品名称商品名称商品名称商品名称</p>
                    <div class="inner_title">
                        <p>店家名称</p>
                        <p class="price">￥ 55.00</p>
                    </div>
                </div>
            </a>
            <a href="discover_detail.html">
                <div class="card">
                    <img src="./images/1585641068(1).jpg" alt="">
                    <p class="goods_title">商品名称商品名称商品名称商品名称</p>
                    <div class="inner_title">
                        <p>店家名称</p>
                        <p class="price">￥ 55.00</p>
                    </div>
                </div>
            </a>
            <a href="discover_detail.html">
                <div class="card">
                    <img src="./images/1585641068(1).jpg" alt="">
                    <p class="goods_title">商品名称商品名称商品名称商品名称</p>
                    <div class="inner_title">
                        <p>店家名称</p>
                        <p class="price">￥ 55.00</p>
                    </div>
                </div>
            </a>
            <a href="discover_detail.html">
                <div class="card">
                    <img src="./images/1585641068(1).jpg" alt="">
                    <p class="goods_title">商品名称商品名称商品名称商品名称</p>
                    <div class="inner_title">
                        <p>店家名称</p>
                        <p class="price">￥ 55.00</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="kong3"></div>
    <div class="weui-tabbar">
        <a href="index.html?infrom=2" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="images/shouye.png" alt="">
            </div>
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="discover.html" class="weui-tabbar__item weui-bar__item--on">
            <div class="weui-tabbar__icon">
                <img src="images/faxianguanli1.png" alt="">
            </div>
            <p class="weui-tabbar__label">发现</p>
        </a>
        <a href="order.html" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="images/order.png" alt="">
            </div>
            <p class="weui-tabbar__label">订单</p>
        </a>
        <a href="me.html" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="images/me.png" alt="">
            </div>
            <p class="weui-tabbar__label">我的</p>
        </a>
        <!-- <a class="fb" href="sc-fb.html"></a> -->
    </div>
</body>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swipe.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 6
    })

    function listEach(list, active) {
        $(list).click(function() {
            var index = $(list).index(this)
            for (var i = 0; i < $(list).length; i++) {
                $(list).eq(i).removeClass(active)
                $(list).eq(index).addClass(active)
            }
        })
    }
    listEach(".swiper-slide", "swiper-slide-active")
</script>

</html>